<template>
	<view class="pages">
		<up-navbar bg-color="#2E90EC" placeholder>
			<template #left>
				<view class="pages-title-option">
					<up-icon
						name="arrow-left"
						size="19"
						color="#fff"
						@click="onGoBack"
					></up-icon>
					
					<view class="pages-title-option--images">
						<image
							@click="onSelectOrg"
							src="../../static/avatar.jpeg" 
							mode="aspectFit"
						></image>
						<up-badge
							max="999" 
							:value="99"
							shape="horn"
							absolute
							:offset="[-5, -15]"
						></up-badge> 
					</view>
				</view>
			</template>
			
			<template #center>
				<view class="pages-title-font">任务大厅</view>
			</template>
		</up-navbar>
		
		<view class="pages-search">
			<up-tabs
				activeStyle="#2E90EC"
				:scrollable="false"
				lineWidth="40rpx"
				:list="tabs"
				@click="onSkipTabs"
			></up-tabs>
			
			<view class="pages-search-input">
				<up-search
					placeholder="请输入任务名称进行搜索" 
					v-model="params.taskName"
					shape="square"
					clearabled
					showAction
					searchIcon="search"
					:actionStyle="{ color: '#2E90EC'}"
				></up-search>
			</view>
			
			<up-dropdown active-color="#2E90EC" border-bottom>
				<up-dropdown-item
					title="任务类型"
					v-model="params.taskType"
					:options="[
						{ label: '巡查任务', value: 1 },
						{ label: '核查任务', value: 2 },
						{ label: '服务任务', value: 3 },
					]"
				></up-dropdown-item>
				<up-dropdown-item
					v-model="params.taskStatus"
					title="任务状态"
					:options="[
						{ label: '待分拨', value: 1 },
						{ label: '已分拨', value: 2 },
						{ label: '已完成', value: 3 },
					]"
				></up-dropdown-item>
				<up-dropdown-item
					title="任务时间"
				>
					<view class="dropdown-item-content">
						<up-calendar 
							key="select-calendar" 
							show
							mode="range"
							:showTitle="false"
							:showSubtitle="false"
						></up-calendar>
					</view>
				</up-dropdown-item>
			</up-dropdown>
		</view>
		
		<view class="pages-total">
			<view class="pages-total-font">
				共计<text style="color: #2E90EC;">{{ count }}</text>条任务
			</view>
			
			<view class="pages-total-button">
				<up-subsection 
					:list="types" 
					:current="0"
					active-color="#2E90EC"
					bgColor="#fff"
					mode="subsection"
				></up-subsection>
			</view>
		</view>
		
		<view class="pages-up-list">
			<up-list 
				@scrolltolower="scrolltolower"
				height="100%"
				width="100%"
			>
				<template v-if="params.pageNum === 1 && loading">
					<view class="pages-list-item" v-for="item of 4"  :key="item">
						<up-skeleton
							loading
							rows="3"
							title
							animate
						></up-skeleton>
					</view>
				</template>
				<template v-if="count === 0 && !loading">
					<up-empty icon="list" marginTop="300rpx"></up-empty>
				</template>
				
				<up-list-item 
					v-for="(item, index) of list" 
					:key="index"
				>
					<view class="pages-list-item" @click="onSkipRouterToDetail(item)">
						<view 
							class="pages-item-status"
							:class="{
								'pages-item-status--warning' : item.taskStatus == 0,
								'pages-item-status--success':  item.taskStatus == 1
							}"
						>
							{{ item.taskStatus == 0 ? '待分拨' : item.taskStatus == 1 ? '已分拨' : item.taskStatus == 2 ? '已完成' : '待分拨' }}
						</view>
						
						<view class="pages-item-title">
							<text>{{ item.taskName }}</text>
							<text class="pages-item-title--tag" v-show="item.overdue == 1">逾期</text>
						</view>
						<view class="pages-item-row">
							<text class="pages-hint-title">任务时间</text>
							<text class="pages-hint-content">{{ item.startDate || '--' }} 至 {{ item.endDate || '--' }}</text>
						</view>
						<view class="pages-item-row">
							<text class="pages-hint-title">任务板块</text>
							<text class="pages-hint-content">场所巡查</text>
						</view>
						
						<view class="pages-item-row">
							<text class="pages-hint-title">任务进度</text>
							<view class="pages-hint-content pages-hint-content--flex">
								<view style="width: 350rpx;">
									<up-line-progress
										:percentage="(((item.checkNum / item.taskNum) * 100).toFixed(2)) * 1" 
										activeColor="#0F5BFF"
										height="30rpx"
									></up-line-progress>
								</view>
								<text style="margin-left: 10rpx;">{{ `${item.taskNum || 0}/${item.checkNum || 0}` }}</text>
							</view>
						</view>
					</view>
				</up-list-item>
				
				<up-loadmore line loadingIcon="circle" v-show="count != 0" :status="loadmore" />
			</up-list> 
		</view>
		
		
		<SelectOrg ref="selectOrgRef" @onOrgChange="onSetRoleName"  />
	</view>
</template>

<script setup>
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { onHasUserinfoData, onSetUserinfoData, onGetUserinfoData, onGetRoleIdData,  onSetRoleIdData, onSetRolesData, onGetRolesData } from "/common/userinfo.js"
import SelectOrg from '../../componses/select-org/index.vue'
import { onGetTask } from "/serves/api.js";

const selectOrgRef = ref(null)
const loading = ref(true)
const loadmore = ref('loadmore')
const count = ref(0)
const list = ref([])
const params = ref({
	pageNum: 1,
	pageSize: 10,
	
	taskName: null,
	taskType: null,
	startDate: null,
	endDate: null,
	
	belongTo: 100,
})

// 跳转至详情页面
const onSkipRouterToDetail = (item) => {
	const { id } = item;
	const url = `/pages/task/details?id=${id}`
	uni.redirectTo({ url })
}


const onGetTaskList = async (refresh = false) => {
	loading.value = true
	loadmore.value = 'loading'
	try{
		const response = await onGetTask(params)
		const { rows, total } = response
		const temp = list.value
		rows.map(v => temp.push(v))
		count.value = total
		
		if (rows.length !== params.value.pageSize) loadmore.value = 'nomore'
		else loadmore.value = 'loadmore'
		
		if (refresh) {
			list.value = rows
			return
		}
		
		list.value = temp
	} finally {
		if (params.value.pageNum === 1) setTimeout(() => loading.value = false, 1800)
		else loading.value = false
	}
}

const tabs = reactive([
	{ name: '部门任务', value: 'dept' },
	{ name: '个人任务', value: 'user' },
]) 
const types = reactive([
	{ name: '巡查任务', value: 'dept' },
	{ name: '处置任务', value: 'user' },
])

const scrolltolower  = function(e) {}

// 切换tabs
const onSkipTabs = function (e) {
	console.log(e)
}

const onSelectOrg = function () {
	selectOrgRef.value.onShowPopup()
}

const onGoBack = function () {
	uni.navigateBack()
}

onLoad((options) => onGetTaskList())

</script>

<style scoped lang="scss">

.pages-title-font {
	font-size:  32rpx;
	color: #FFFFFF;
}

.pages-title-option {
	width: auto;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pages-title-option--back  {
	font-size: 30rpx;
	color: #fff;
}

.pages-title-option--images {
	width: auto;
	height: auto;
	position: relative;
	margin-left: 30rpx;
	
	& > image {
		width: 60rpx;
		height: 60rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 11rpx 0px rgba(21,105,184,0.25);
		border-radius: 50%;
	}
}

.pages-search {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	background-color: #fff;
}

.pages-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
}

.pages-total {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	&-font {
		width: auto;
		font-size: 28rpx;
		color: #666;
		text-align: left;
	}
	
	&-button {
		width: 300rpx;
	}
}

.dropdown-item-content {
	width: 100%;
	box-sizing: border-box;
	background-color: #fff !important;
	padding: 0 30rpx;
	height: 400rpx;
}

.pages-up-list { 
	width: 100%;
	height: calc(100vh - 532rpx);
	box-sizing: border-box;
	padding: 0 30rpx;
	padding-bottom: env(safe-area-inset-bottom);
}

.pages-list-item {
	width: 100%;
	height: auto;
	background: linear-gradient(0deg, #FAFCFF 2%, #F6F9FF 100%);
	box-shadow: 8rpx 8rpx 16rpx 0px rgba(0,0,0,0.1);
	border-radius: 4rpx;
	box-sizing: border-box;
	padding: 24rpx 30rpx;
	margin-bottom: 30rpx;
	position: relative;
	overflow: hidden;
	transform: all 0.2s;
	
	&:active {
		background: linear-gradient(0deg, #FAFCFF 2%, rgba(126, 187, 255, .2) 100%);
		box-shadow: 8rpx 8rpx 16rpx 0px rgba(0,0,0,0.3);
	}
}

.pages-item-status {
	width: 150rpx;
	height: 150rpx;
	background-color: #317FFC;
	text-align: center;
	font-size: 24rpx;
	color: #FFFFFF;
	box-sizing: border-box;
	padding-top: 110rpx;
	transform: rotate(45deg);
	position: absolute;
	top: -75rpx;
	right: -75rpx;
	box-shadow: 4rpx 4rpx 4rpx 0px rgba(49, 127, 252, .3);
	
	&--warning {
		background-color: #FF9900;
		box-shadow: 4rpx 4rpx 8rpx 0px rgba(255, 153, 0, .3);
	}
	
	&--success {
		background-color: #00C500;
		box-shadow: 4rpx 4rpx 8rpx 0px rgba(0, 197, 0, .3);
	}
}

.pages-item-title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 36rpx;
	color: #171717;
	line-height: 1.5em;
	font-style: normal;
	width: 100%; 
	
	&--tag {
		padding: 5rpx 10rpx;
		font-size: 28rpx;
		color: #FF0000;
		border: 1px solid #FF0000;
		background-color: rgba(255, 0, 0, .1);
		margin-left: 20rpx;
		border-radius: 4rpx;
	}
}

.pages-item-row {
	width: 100%;
	min-height: 60rpx;
	height: auto;
	box-sizing: border-box;
	padding-top: 10rpx;
	display: flex;
	align-items: flex-start;
}

.pages-hint-title {
	width: 160rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
}

.pages-hint-content {
	display: inline-block;
	width: calc(100% - 160rpx);
	font-weight: 500;
	font-size: 28rpx;
	color: #333333;
	transition: all .3s;
	
	&--active {
		padding-top: 5rpx;
		
		&:active {
			opacity: 0.9;
		}
	}
}

.pages-hint-content--flex {
	display: inline-flex;
	align-items: center;
}

.pages-hint-content--hint {
	margin-left: 10rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
}

</style>